<template>
  <div class="trigger-container" :class="[{ 'is-active': isCollapse }]" @click="toggleSideBar">
    <i class="el-icon-s-fold"></i>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const store = useStore()
    const isCollapse = computed(() => store.getters.collapsed)
    const toggleSideBar = () => store.dispatch('app/toggleCollapsed')

    return {
      isCollapse,
      toggleSideBar
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss';

.trigger-container {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all 0.3s, padding 0s;
  transition: all 0.3s, padding 0s;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }
}

.el-icon-s-fold {
  font-size: 20px;
  color: $color-text-regular;
  vertical-align: middle;
}

.is-active {
  transform: rotate(180deg);
}
</style>
